<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="平台消息"
      left-text="返回"
      left-arrow
      @click-left="jump('about')"
    />

    <div class="ak" v-for="index in 13" @click="jump('message')">
      <van-row>
        <van-col span="24">2022-08-06 16:44</van-col>
        <br />
        <img
          src="https://img0.baidu.com/it/u=3425868493,3104015061&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800"
          style="
            margin-top: 10px;
            height: 190px;
            width: 100%;
            border-radius: 7px;
          "
        />
        <van-row
          type="flex"
          style="margin-top: 10px; text-align: left; text-indent: 1em"
        >
          <van-col span="24">蓝色家园</van-col>
        </van-row>
        <van-row
          type="flex"
          style="
            margin-top: 0px;
            text-align: left;
            text-indent: 1em;
            color: gray;
          "
        >
          <van-col span="24">蓝色家园</van-col>
        </van-row>
      </van-row>
    </div>
  </div>
</template>

<script>
  //书写组件配置项目 相当于写js代码的地方
  //要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
  export default {
    //export default 相当于过去的new vue ({el:"#div"})
    //全部都是json格式

    props: {
      //注册属性，用来父子组件传递参数使用
    },
    data() {
      //定义数据的地方
      return {};
    },
    created() {
      //生命周期  创建后要做的事情  vue被创建时候执行的
    },
    mounted() {
      // 生命周期  挂载完成后
    },
    methods: {
      //  方法事件处理
      jump(uri) {
        this.$router.push(
          uri,
          () => {},
          () => {}
        );
      },
    },
    components: {
      // 组件注册的地方 相当于pom文件
    },
  };
</script>

<style>
  /* 编写样式的 */
  .ak {
    margin: 20px 10px 0px 10px;
    width: auto;
    height: 300px;
    /* background-color: aqua; */
    border-radius: 10px;
  }
</style>
